<template>
  <cu-layout :bgStyle="{ color: '#ffffff' }" :navProp="{ placeholder: true }">
    <view :class="[`${prefixCls}-recommendation-container`]">
      <template v-if="listItem.length">
        <view v-for="(item, index) in listItem" :key="index" class="listItem">
          <view @click="chatHandler(item)">
            <view class="date">{{ item.created }}</view>
            <view class="house">
              <view class="houseSize">{{ item.project_name }}</view>
              <view class="houseNum">{{ item.house_name }}</view>
              <view class="proponent">{{ item.business_type_name }}</view>
            </view>
          </view>
        </view>
        <uv-load-more :status="status" :dashed="true" :line="true" marginTop="20px" />
      </template>
      <template v-else>
        <cu-empty mode="list" text="暂无建议"> </cu-empty>
      </template>
      <!--按钮-->
      <view class="btnBase">
        <uv-button style="height: 100%; width: 100%" text="新增" type="primary" @click="addHandler"></uv-button>
        <uv-safe-bottom></uv-safe-bottom>
      </view>
    </view>
  </cu-layout>
</template>

<script>
import { mapGetters } from 'vuex'
import { proposeList } from './api'

export default {
  name: 'recommendation',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      showFlag: false,
      listItem: [],
      status: 'nomore',
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters([]),
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad() {
    this.getProposeListData()
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {
    this.getProposeListData()
  },
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    chatHandler(data) {
      this.$ROUTE.go('/pages/subpackage/recommendation/detail', { id: data.id })
    },
    addHandler() {
      this.$ROUTE.go('/pages/subpackage/recommendation/add')
    },
    async getProposeListData() {
      const { data = [] } = await proposeList({ type: 'jianyi' })
      this.listItem = data
      uni.stopPullDownRefresh()
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('recommendation-container')} {
  position: relative;
  background: #f8f8f8;
  overflow: hidden;
  box-sizing: border-box;
  padding: 40rpx 30rpx 100px;
  .listItem {
    background: white;
    border-radius: 8rpx;
    display: flex;
    flex-direction: column;
    padding: 16rpx;
    box-shadow: #e7e7e7ff 0rpx 0rpx 16rpx;
    margin-bottom: 40rpx;
    //日期
    .date {
      padding: 16rpx;
      border-bottom: 2rpx #e7e7e7ff solid;
      font-size: 30rpx;
    }
    //详情
    .house {
      padding: 24rpx 16rpx;

      view {
        margin-bottom: 20rpx;
        font-size: 24rpx;
      }
      view:last-child {
        margin-bottom: 0;
      }
      .houseSize {
        color: #3b3b3b;
      }
      .houseNum {
        color: #9a9a9a;
      }
      .proponent {
        color: #e0e0e0ff;
      }
    }
  }

  .notSuggestive {
    width: 100%;
    height: 1200rpx;
    text-align: center;
    color: #e0e0e0ff;
    line-height: 1200rpx;
  }

  .overNow {
    font-size: 24rpx;
    color: #e0e0e0ff;
    text-align: center;
    margin-top: 60rpx;
    margin-bottom: 300rpx;
  }

  //按钮
  .btnBase {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20rpx 30rpx;
    background: #fff;
  }
}
</style>
